<template>
  <ModalDialog v-model:visible="isShowDia" secClass="form_card_sec" title="俱乐部信息">
    <template #content>
      <div class="form_body">
        <div class="add_box">
          <div class="admin_box">
            <div class="admin_list_box">
              <n-flex class="admin_listItem_box" justify="space-between">
                <n-flex class="ad_list_l">
                  <div class="ad_list_img">
                    <Imgt v-show="!isEditing" :src="returnClubLogo(infoData.club_logo)" />
                    <n-upload class="up_load_box" v-show="isEditing" :max="1" @before-upload="beforeUpload"
                              accept=".jpg,.jpeg,.png,.gif,.webp" list-type="image-card">
                      <Imgt :src="returnClubLogo(infoData.club_logo)" />
                    </n-upload>
                  </div>
                  <div>
                    <div class="bold_txt">
                      <span v-show="!isEditing">{{ infoData.club_name }}</span>
                      <n-input v-show="isEditing" v-model:value="infoData.club_name" :placeholder="t('请输入')" :bordered="false"/>
                    </div>
                    <div class="id_box">ID: {{ infoData.club_id }}</div>
                    <n-flex align="center" class="item_bottom">
                      <span class="icon"><iconpark-icon size=".84rem" name="paihiconss01" color="#b5a4ff"></iconpark-icon></span>
                      <span class="txt txt_ellipsis">{{ infoData.totalmember }}</span>
                    </n-flex>
                  </div>
                </n-flex>
                <div class="ad_list_r button_color button" @click="showEditData">
                  {{isEditing ? t('完成') : t('编辑')}}
                </div>
              </n-flex>
            </div>

            <!-- 简介 -->
            <div class="jj_box">
              <p class="bold_txt">俱乐部简介:</p>
              <div class="jj_txt">
              <span v-show="!isEditing">
                  {{ infoData.club_introduction }}
              </span>
                <n-input v-show="isEditing" type="textarea" :rows="2" v-model:value="infoData.club_introduction" :placeholder="t('club_page_qsr')" :bordered="false"
                         clearable />
              </div>
            </div>

            <!-- 成员 -->
            <div class="member_box">
              <p class="bold_txt">成员:</p>
              <n-flex class="member_list_box" justify="space-between" align="center">
                <n-flex class="member_list_box_l">
                  <span class="member_list_item" v-for="(item, index) in infoData.userinfo.slice(0, 7)" :key="index">
                      <Imgt :src="item.head_photo_url" :alt="item.username"/>
                  </span>
                  <div v-if="!infoData.userinfo.length" class="not_data" style="color: #8d8d8d">{{t('home_page_nomore_data')}}</div>
                </n-flex>
                <span class="member_list_box_r button" @click="showAllMember">
                  <iconpark-icon class="icon" icon-id="jlbiconfangxiang01" size="1.25rem"></iconpark-icon></span>
              </n-flex>

            </div>

            <div class="b_list_box">
              <n-flex class="list_item pointer" @click="showSetting = true" justify="space-between" align="center">
                <span>管理员设置</span>
                <iconpark-icon icon-id="fangxiangicon01" color="#AFB6BD" size=".9rem"></iconpark-icon>
              </n-flex>
              <n-flex class="list_item" justify="space-between" align="center">
                <span>允许管理员创建牌局</span>
                <div
                  class="coverSwitch pointer"
                  :data-value="switchActive"
                  @click="handleBeforeChange"
                ></div>
                <n-switch v-model:value="switchActive" />
              </n-flex>
              <n-flex class="list_item pointer" justify="space-between" align="center" @click="showCheckAc">
                <span class="sp_list">
                  审批管理
                  <i>{{extraInfoData.approve_count}}</i>
                </span>
                <iconpark-icon icon-id="fangxiangicon01" color="#AFB6BD" size=".9rem"></iconpark-icon>
              </n-flex>
              <n-flex class="list_item pointer" justify="space-between" align="center" @click="showCardGameAc">
                <span>牌局管理 ({{ extraInfoData.table_count }})</span>
                <iconpark-icon icon-id="fangxiangicon01" color="#AFB6BD" size=".9rem"></iconpark-icon>
              </n-flex>
              <n-flex class="list_item pointer" justify="space-between" align="center" @click="disbandClub = true">
                <span>解散俱乐部</span>
                <iconpark-icon icon-id="fangxiangicon01" color="#AFB6BD" size=".9rem"></iconpark-icon>
              </n-flex>
            </div>

          </div>

        </div>
      </div>
    </template>

  </ModalDialog>
  <!-- 解散俱乐部 -->
  <ModalDialog v-model:visible="disbandClub" secClass="form_card_sec" title="提示">
    <template #content>
      <div class="tip_form_body">
        <div class="tips_title"> {{t('是否确定解散该俱乐部')}} </div>
        <n-flex class="tips_btn" justify="center">
          <a class=" button" @click="disbandClub = false">取消</a>
          <a class="button_color button">确定</a>
        </n-flex>
      </div>
    </template>
  </ModalDialog>
  <!-- 管理员设置 -->
  <adminSetting v-model:visible="showSetting" :clubInfoData="clubInfoData"/>
  <!-- 审批管理 -->
  <approvalCheck v-model:visible="showCheck" />
  <!-- 牌局管理 -->
  <cardGameMan v-model:visible="showCardGame" />
  <!-- 成员列表 -->
  <memberList v-model:visible="showAllMemberList" @getClubInfoData="getClubInfoData" :clubInfoData="clubInfoData"/>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import Imgt from "@/components/Imgt.vue";
import { useI18n } from "vue-i18n";
import ModalDialog from '@/components/ModalDialog.vue';
import adminSetting from './adminSetting.vue';
import approvalCheck from './approvalCheck.vue';
import cardGameMan from './cardGameMan.vue';
import memberList from './memberList.vue';
import { NetPacket } from '@/netBase/NetPacket.ts';
import H5Websocket from '@/net/Net1.ts';
import { MessageEvent2 } from '@/net/MessageEvent2.ts';
import { NetMsgType } from '@/netBase/NetMsgType.ts';
import { Message } from '@/utils/discreteApi.ts';
import { returnClubLogo } from '@/utils/publicMethods.ts';
import { User } from '@/store/user.ts';
import pinia from '@/store';
import { storeToRefs } from 'pinia';

const { t } = useI18n();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  clubInfoData: {
    type: Object,
    default: {}
  }
});
const emit = defineEmits(["update:visible", "getClubInfo"]);

const UserStore = User(pinia);
const { roleInfo } = storeToRefs(UserStore);
const uploadUrl = ref(localStorage.getItem('upload_Url_Info'))
const disbandClub = ref(false);
const isEditing = ref(false);
const switchActive = ref(false);
const showSetting = ref(false);
const showCheck = ref(false);
const showCardGame = ref(false);
const showAllMemberList = ref(false);

const infoData: any = ref({
  club_id: 0,
  club_name: '',
  club_introduction: '',
  totalmember: 0,
  userinfo: [],
})
const extraInfoData = ref({
  allow_admin_createtable: 0,
  approve_count: 0,
  room_count: 0,
  table_count: 0,
})

const isShowDia = computed({
  get: function () {
    return props.visible;
  },
  set: function (value) {
    emit("update:visible", value);
  },
});
const showEditData = () => {
  isEditing.value = !isEditing.value
  if (!isEditing.value) {
    updateClubInfo();
  }
}
// 查看全部成员
const showAllMember = () => {
  showAllMemberList.value = true
}
const handleBeforeChange = () => {
  console.log("before---", switchActive);
  // switchActive.value = !switchActive.value
};
// 显示审批管理
const showCheckAc = () => {
  showCheck.value = true
}
// 显示牌局管理
const showCardGameAc = () => {
  showCardGame.value = true
}
// 获取俱乐部的其它信息
const getExtraInfo = (id: any) => {
  if (!id) return
  const req: any = NetPacket.req_get_extra_club_info();
  req.club_id = id || '';
  H5Websocket.sendMessageHandler(req);
}
// 返回结果：allow_admin_createtable：是否允许管理员创建牌局； approve_count：待审批的申请玩家的数量；
// room_count：该俱乐部拥有房间的数量； table_count：牌局(即桌子)的数量，一个房间可以有一张或者多张桌子
const getExtraInfoHandle = (res: any) => {
  console.log('俱乐部额外信息-----', res)
  extraInfoData.value = res
  switchActive.value = res.allow_admin_createtable
};
// 更改俱乐部信息, 说明：如果club_name，club_intro的值没有改变，则传空字符串，这样就不会修改原来的值；club_logo的值没有改变则传0
const updateClubInfo = () => {
  const req: any = NetPacket.req_modify_club_info();
  req.club_id = infoData.value.club_id;
  req.club_name = infoData.value.club_name;
  req.club_intro = infoData.value.club_introduction;
  req.club_logo = infoData.value.club_logo;
  H5Websocket.sendMessageHandler(req);
}
const setClubInfoHandle = (res: any) => {
  const codeTxt: any = {
    0: t('修改成功'),
    1: t('俱乐部不存在'),
    2: t('非该俱乐部创建者或管理员'),
    3: t('proxy_page_caoZuoFail'),
  }
  if (res.result === 0) {
    Message.success(codeTxt[res.result]);
  } else {
    Message.error(codeTxt[res.result]);
  }
  getClubInfoData();
};
// 获取俱乐部信息
const getClubInfoData = () => {
  emit('getClubInfo')
}
// 上传图片
const beforeUpload = (data: any) => {
  const file = data.file.file;
  if (file && file.size > 1024 * 1024 * 2) { // 2MB限制
    Message.error('文件大小不能超过2MB！');
    return;
  }
  const formData = new FormData();
  formData.append('image', file);
  formData.append('device_id', `${roleInfo.value.id}`);
  fetch(`${uploadUrl.value}api/upload/img`, {
    method: 'POST',
    body: formData,
  })
    .then(response => response.json()).then(response => {
    if (response.status == 200 || response.status == 'success') {
      const urlImg = response.data.path;
      infoData.value.club_logo = urlImg
      Message.success(response.message);
    } else {
      Message.error(response.message);
    }
  });
};


watch(
  () => isShowDia.value,
  (n) => {
    if (n) {
      console.log('--------')
      getExtraInfo(infoData.value.club_id)
      MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_get_extra_club_info, getExtraInfoHandle);
    } else {
      MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_extra_club_info, null);
    }
  }
);
watch(
  () => props.clubInfoData,
  (n) => {
    if (n) {
      console.log('######有俱乐部信息', n)
      infoData.value = JSON.parse(JSON.stringify(n));
    }
  }
);
onUnmounted(() => {
  // 取消监听
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_modify_club_info, null);
});
onMounted(() => {
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_modify_club_info, setClubInfoHandle);
});
</script>
<style lang="less" scoped>
@import '@/assets/club.less';
.form_body {
  padding: 20px 12px !important;
  font-size: 14px;
  p {
    margin: 8px 0;
  }
  .bold_txt {
    font-size: 16px;
    font-weight: 500;
  }
  .admin_list_box {
    max-height: 260px;
    overflow-y: auto;
    .admin_listItem_box {
      background: #0D0D29;
      border-radius: 8px;
      margin-bottom: 12px;
      padding: 16px;
      .id_box {
        color: #AFB6BD;
      }
      .ad_list_l {
        gap: 4px !important;

        .ad_list_img {
          position: relative;
          .up_load_box {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            :deep(.n-upload-file-list) {
                .n-upload-trigger--image-card, .n-upload-file {
                  width: 76px;
                  height: 76px;
                  border-radius: 50%;
                  .n-upload-dragger {
                    border-radius: 50%;
                    background: none;
                    border: 0;
                  }
                }

            }

          }
        }
        :deep(.n-input) {
          height: 24px;
          border-radius: 4px;
          .n-input__input-el {
            height: 24px;
          }
        }
        img {
          width: 76px;
          height: 76px;
          border-radius: 50%;
        }
        .item_bottom {
          width: 80px;
          gap: 2px !important;
          font-size: 14px;
          color: rgba(181, 164, 255, 1);
          border-radius: 24px;
          height: 24px;
          background: #030309;
          padding: 0 11px;

          .icon {
            width: 16px;
            height: 16px;
          }
          .txt {
            height: 16px;
            line-height: 16px;
            width: 68%;
          }
        }
      }
      .ad_list_r {
        width: 86px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
  .jj_box {
    .jj_txt {
      color: #AFB6BD;
    }
  }
  .member_box {
    margin-bottom: 8px;
    .member_list_box {
      gap: 14px !important;
      .member_list_box_l {
        gap: 16px !important;
        .member_list_item {
          width: 48px;
          height: 48px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }
      .member_list_box_r {
        width: 24px;
        height: 24px;
      }

    }
  }
  .b_list_box {
    .list_item {
      height: 36px;
      position: relative;
      .coverSwitch {
        position: absolute;
        width: 40px;
        height: 20px;
        right: 0;
        z-index: 9;
      }
      :deep(.n-switch) {
        min-width: 40px;
        width: 40px;
        .n-switch__rail {
          min-width: 40px;
          width: 40px;
          height: 20px;
          .n-switch__button {
            top: 2.5px;
            width: 15px;
            height: 15px;
            background: linear-gradient(180deg, #FFFFFF 0%, #B4B3E5 100%);
          }
        }
        &.n-switch--active {
          .n-switch__rail {
            background: linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%);
            .n-switch__button {
              left: 20px;
            }
          }
        }
      }
      .sp_list {
        i {
          display: inline-block;
          text-align: center;
          font-size: 12px;
          width: 16px;
          height: 16px;
          margin-left: 6px;
          font-style: normal;
          background: radial-gradient(83.33% 83.33% at 50% 16.67%, #F95959 0%, #E11313 69.85%, #F95959 96.5%);
          border: 1px solid #fff;
          border-radius: 50%;
        }
      }
    }
  }

}
</style>
